<!--
 * @Description: 邀请有礼 - 活动规则配置
 * @Author: liyujie
 * @Date: 2021/03/04
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/03/04
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="86px"
                        class="form-wrap"
                        @submit.native.prevent
                    >
                        <div class="form-title">
                            活动规则设置说明
                        </div>
                        <div class="rule-desc">
                            <p>1、展示位置：APP中邀请有礼的右上角的“活动规则”</p>
                            <p>2、用户可直接看到的内容，需改需谨慎</p>
                        </div>
                        <div
                            class="form-title"
                            style="margin-top: 52px"
                        >
                            编辑活动规则
                        </div>
                        <div
                            v-for="(item, index) in ruleForm.list"
                            :key="index"
                            class="rule-item"
                        >
                            <div class="rule-item-header">
                                <div class="header-title">
                                    规则{{ index + 1 }}
                                </div>
                                <div>
                                    <el-button
                                        type="text"
                                        :disabled="ruleForm.list.length === 1"
                                        v-if="type === 'edit'"
                                        @click="deleteRule(index)"
                                    >
                                        删除
                                    </el-button>
                                </div>
                            </div>
                            <div class="rule-item-content">
                                <el-form-item
                                    label="规则标题："
                                    :prop="`list[${index}].title`"
                                    :rules="rules.title"
                                >
                                    <el-input
                                        v-model="item.title"
                                        size="medium"
                                        placeholder="请输入规则标题"
                                        clearable
                                        :disabled="type === 'detail'"
                                    />
                                </el-form-item>
                                <el-form-item
                                    v-for="(rule, sIndex) in item.texts"
                                    :key="sIndex"
                                    :label="`内容${sIndex + 1}：`"
                                >
                                    <el-input
                                        v-model="item.texts[sIndex]"
                                        type="textarea"
                                        placeholder="请输入规则内容"
                                        :autosize="{ minRows: 4, maxRows: 6}"
                                        style="width: 650px"
                                        :disabled="type === 'detail'"
                                    />
                                    <el-button
                                        type="text"
                                        :disabled="item.texts.length === 1"
                                        style="margin-left: 16px"
                                        v-if="type === 'edit'"
                                        @click="deleteContent(index, sIndex)"
                                    >
                                        删除内容
                                    </el-button>
                                    <el-button
                                        type="text"
                                        v-if="sIndex === item.texts.length - 1 && type === 'edit'"
                                        @click="addContent(index)"
                                    >
                                        继续添加内容
                                    </el-button>
                                </el-form-item>
                            </div>
                        </div>
                        <div
                            class="add-button"
                            v-if="type === 'edit'"
                            @click="addRule"
                        >
                            继续添加规则
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="submit-view">
            <el-button
                size="medium"
                type="default"
                @click="$emit('update')"
            >
                取消
            </el-button>
            <el-button
                size="medium"
                type="primary"
                v-if="type === 'detail'"
                @click="type = 'edit'"
            >
                编辑
            </el-button>
            <el-button
                size="medium"
                type="primary"
                v-if="type === 'edit'"
                @click="handleSubmit()"
            >
                保存
            </el-button>
        </div>
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import { deepClone } from "@/assets/js/utils";

export default {
    name: 'PoliteRulesEdit',
    data() {
        return {
            // 页面状态 detail查看 edit编辑
            type: 'detail',
            ruleForm: {
                list: []
            },
            rules: {
                title: [
                    {required: true, message: '请输入规则标题', trigger: 'change'}
                ],
            },
            authResult: {}
        };
    },
    mixins: [back],
    watch: {},
    components: {},
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 页面初始化
         */
        init() {
            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '邀请有礼'}, {title: '活动规则'}]);
            this.authResult = this.$route.meta.authResult;
            this.getDetail();
        },

        /**
         * 获取
         */
        getDetail() {
            this.$post('/student/student_user_invite_award%5Cget_invite_rule', {}, resp => {
                if (resp.code === 1) {
                    this.ruleForm.list = resp.data.rule_list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let rule_list_json = JSON.stringify(deepClone(this.ruleForm.list));

                    this.$post('/student/student_user_invite_award%5Cset_invite_rule', {rule_list_json}, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.type = 'detail';
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * 添加规则项
         */
        addRule() {
            this.ruleForm.list.push({title: '', texts: ['']});
        },

        /**
         * 删除规则项
         * @param index
         */
        deleteRule(index) {
            this.ruleForm.list.splice(index, 1);
        },

        /**
         * 添加内容
         * @param index
         */
        addContent(index) {
            this.ruleForm.list[index].texts.push('');
        },

        /**
         * 删除内容
         * @param index
         * @param sIndex
         */
        deleteContent(index, sIndex) {
            this.ruleForm.list[index].texts.splice(sIndex, 1);
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;
    .submit-view {
        width: 100%;
        height: 68px;
        background: #FFFFFF;
        box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.1);
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        padding-left: 210px;
        .el-button {
            width: 120px;
            margin: 0 16px;
        }
    }

    .content-wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;

        .header {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            white-space: nowrap;
            box-sizing: border-box;
            padding-left: 35px;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            flex-shrink: 0;

            &::before {
                content: '';
                background: rgba(24, 144, 255, 1);
                width: 3px;
                height: 20px;
                position: absolute;
                top: 23px;
                left: 25px;
            }
        }

        .form-view {
            border-radius: 2px;
            box-sizing: border-box;
            padding: 24px 32px 68px;
            margin: 32px;
            background: #FBFBFB;
            .form-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                border-bottom: 1px solid #E9E9E9;
                padding: 12px 0;
                margin-bottom: 24px;
            }

            .rule-desc {
                height: 84px;
                background: #F7F7F7;
                border-radius: 4px;
                width: calc(100% - 52px);
                margin-left: 52px;
                display: flex;
                flex-direction: column;
                padding: 20px 24px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
            }
            .rule-item {
                width: calc(100% - 52px);
                margin-left: 52px;
                background: #FAFAFA;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                margin-bottom: 20px;
                margin-right: 20px;
                .rule-item-header {
                    height: 40px;
                    background: #F0F0F0;
                    border-radius: 4px 4px 0 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 24px;
                }
                .rule-item-content {
                    padding: 24px 72px 2px 24px;
                }
            }
            .add-button {
                width: calc(100% - 52px);
                margin-left: 52px;
                height: 36px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #20A0FF;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #20A0FF;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin-right: 20px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }
}
</style>

